<template>
    <view>
        <!-- 轮播图 -->
        <view class="" style="height: 800rpx;">
            <swiper indicator-dots :autoplay="true" interval="3000" style=" height: 100%;">
                <swiper-item v-for="item in lunbo">
                    <image :src="item" mode="" style="height: 100%;width: 100%;"></image>
                </swiper-item>
            </swiper>
        </view>
        <!-- 商品-价格/名称/介绍 -->
        <view class="beijing zxjz">
            <!-- 价格 -->
            <view>
                <span class="red">￥{{from.retailPrice}}.00</span>
                <span class="hui">￥{{from.counterPrice}}.00</span>
            </view>
            <!-- 名称 -->
            <view style="color: #363636;">
                {{from.name}}
            </view>
            <!-- 介绍 -->
            <view style="color: #8e8e8e;font-size: 25rpx;">
                {{from.brief}}
            </view>
        </view>
        <!-- 商品-规格/属性/运费 -->
        <view class="beijing1 zxjz">
            <view style="width: 95%;margin: auto;" class="t">
                <!-- 规格 -->
                <view class="hxfx1 xiahuaxian" v-for="item in from1" @click="open">
                    <view class="hxfx">{{item.name}}</view>
                    <view class="hui3">请选择></view>
                </view>
                <!-- 属性 -->
                <view class="hxfx1 xiahuaxian" @click="open1">
                    <view class="">属性</view>
                    <view class="hui3">></view>
                </view>
                <!-- 运费 -->
                <view class="hxfx1 xiahuaxian">
                    <view class="">运费</view>
                    <view class="hui3">满88免邮费</view>
                </view>
            </view>
        </view>
        <!-- 商品详情 -->
        <view class="container" style="margin-top: 30rpx;">
            <p v-html="from.detail" class="xiangqing"></p>
        </view>
        <!-- 去购物车/加入购物车/立即购买 -->
        <view class="x bai">
            <view class="spcz x spcz" style="width: 200rpx;height: 80rpx;margin-top: 10rpx;" @click="gowuche">
                购物车
            </view>
            <view class="x spcz">
                <view class="go spcz" @click="open">
                    加入购物车
                </view>
                <view class="mai spcz" @click="open">
                    立即购买
                </view>
            </view>
        </view>
        <!-- 购买/加入购物车/规格-弹窗内容 -->
        <view class="">
            <uni-popup ref="popup" type="bottom" background-color="#fff">
                <!-- 商品图片/价格 -->
                <view class="x" v-for="item in from2" style="border-bottom: #e3e3e3 solid 1rpx;">
                    <view class="x">
                        <image :src="item.picUrl" mode="" style="width: 220rpx;height: 220rpx;"></image>
                    </view>
                    <view class="" style="margin-top: 100rpx;">
                        <!-- 标准选项 -->
                        <view class="">
                            <!-- 高亮时显示价格小数点后两位 -->
                            <p style="font-size: 40rpx;color: red;" v-show="biao == true">
                                ￥{{item.discount}}.00
                            </p>
                            <!-- 未高亮时不显示价格小数点后两位 -->
                            <p style="font-size: 40rpx;color: red;" v-show="biao == false">
                                ￥{{item.discount}}
                            </p>
                        </view>
                        <!-- 标准选项 -->
                        <view class="">
                            <!-- 高亮时显示已选标准 -->
                            <p style="font-size: 26rpx;color: darkgrey;" v-for="item in from1" v-show="biao == true">
                                已选-{{item.valueList[0].value}}
                            </p>
                            <!-- 未高亮时显示 请选择规格-->
                            <p style="font-size: 26rpx;color: darkgrey;" v-for="item in from1" v-show="biao == false">
                                请选择-{{item.valueList[0].specification}}
                            </p>
                        </view>
                    </view>
                </view>
                <!-- 规格 -->
                <view class="" style="border-bottom: #e3e3e3 solid 1rpx;margin-top: 20rpx;margin-left: 30rpx;">
                    <view>规格</view>
                    <view :class="biao ? 'biaozun y spcz':'biaozun1 y spcz'" v-for="item in biaozhun"
                        @click="biao =! biao">
                        {{item}}
                    </view>
                    <view class="" style="height: 40rpx;"></view>
                </view>
                <!-- 购买数量 -->
                <view class="" style="display: flex;flex-direction: row;justify-content: space-between;
                width: 95%;margin: auto;margin-top: 20rpx;height: 70rpx;">
                    <view class="">
                        购买数量
                    </view>
                    <!-- 标准选项高亮时 -->
                    <view class="x" v-show="biao == true">
                        <p :class="shuliang>1 ? 'jian spcz':'jian1 spcz'" @click="jian">
                            -
                        </p>
                        <input type="number" disabled="disabled" class="shuliang" v-model="shuliang" />
                        <p class="jia spcz" style="width: 60rpx;background: #e2e2e2;" @click="jia">
                            +
                        </p>
                    </view>
                    <!-- 标准选项未高亮时 -->
                    <view class="x" v-show="biao == false">
                        <p class="jian spcz" style="width: 60rpx;background: #f0f0f0;color: #a5a5a5;" @click="jian">
                            -
                        </p>
                        <input type="number" disabled="disabled" class="shuliang" v-model="shuliang1" />
                        <p class="jia spcz" style="width: 60rpx;background: #e2e2e2;color: #a5a5a5;" @click="jia">
                            +
                        </p>
                    </view>
                </view>
                <!-- 加入购物车/立即购买 -->
                <view class="" style="margin-top: 50rpx;">
                    <view class="x spjz">
                        <view class="x">
                            <view class="go1 x spcz" @click="jiaru()">
                                加入购物车
                            </view>
                            <view class="mai1 x spcz">
                                立即购买
                            </view>
                        </view>
                    </view>
                </view>
                <view class="" style="height: 80rpx;">

                </view>
            </uni-popup>
        </view>
        <!-- 规格弹框内容 -->
        <view class="">
            <uni-popup ref="popup1" type="bottom" background-color="#fff">
                <view style="margin: auto; width: 200rpx;margin-top: 20rpx;">
                    商品属性
                </view>
                <view class="x hxfx1" v-for="item in from3" style="margin-top: 50rpx;
                border-bottom: #e2e2e2 solid 1rpx;margin-left: 20rpx;">
                    <p style="width: 30%;">{{item.attribute}}</p>
                    <p style="width: 70%;">{{item.value}}</p>
                </view>
            </uni-popup>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                lunbo: [], //轮播图
                from: [], //商品-价格/名称/介绍
                from1: [], //商品-规格/属性/运费
                from2: [], //购买/加入购物车/规格-弹窗内容
                shuliang: 1,
                shuliang1: 1,
                from3: [], //规格弹框内容
                goodsId: 0,
                productId: 0,
                biaozhun: [], //商品标准
                biao: true,

            }
        },
        onLoad(obj) {
            const goodsId = obj.id
            uni.request({
                url: 'http://47.91.230.137:8086/wx/goods/detail?id=' + obj.id,
                success: (res) => {
                    console.log(res)
                    //首页页面进来获取商品的详情信息 里面包含商品id等数据
                    this.goodsId = res.data.data.info.id //商品id
                    this.productId = res.data.data.productList[0].id
                    this.lunbo = res.data.data.info.gallery
                    this.from = res.data.data.info
                    this.from1 = res.data.data.specificationList
                    this.from2 = res.data.data.groupon
                    this.from3 = res.data.data.attribute
                    this.biaozhun = res.data.data.productList[0].specifications

                }
            })
        },
        methods: {
            gowuche() {
                uni.switchTab({
                    url: '/pages/gowu/gowu'
                })
            },
            open() {
                // 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效
                // ，仅支持 ['top','left','bottom','right','center']
                this.$refs.popup.open('bottom')
            },
            open1() {
                this.$refs.popup1.open('bottom')
            },
            jia() {
                if (this.biao == true) {
                    this.shuliang++
                } else {
                    uni.showToast({
                        title: '库存不足',
                        icon: 'none'
                    })
                }
            },
            jian() {
                if (this.shuliang > 1) {
                    this.shuliang--
                } else {
                    uni.showToast({
                        title: '至少选择一件',
                        icon: 'none'
                    })
                }
            },
            jiaru() {
                let obj = {
                    'goodsId': this.goodsId,
                    'number': this.shuliang,
                    'productId': this.productId
                }

                console.log(obj);
                uni.request({
                    url: 'http://47.91.230.137:8086/wx/cart/add',
                    data: obj,
                    success: (res) => {
                        console.log(res)
                    }
                })
            },
        },

    }
</script>

<style>
    html {
        background: #f1f1f1;
    }

    .beijing {
        width: 100%;
        height: 220rpx;
        background: #ffffff;
    }

    .beijing view {
        margin-top: 10rpx;
        margin-left: 20rpx;
    }

    .beijing1 {
        width: 100%;
        height: 300rpx;
        background: #ffffff;
        margin-top: 30rpx;
    }

    .t view {
        height: 85rpx;
        margin-top: 15rpx;

    }

    .xiahuaxian {
        border-bottom: #dddddd 1rpx solid;
    }

    .red {
        color: red;
        font-size: 40rpx;
    }

    .hui {
        font-size: 28rpx;
        color: #8e8e8e;
        margin-left: 20rpx;
        text-decoration: line-through;
    }

    .hui3 {
        color: #8e8e8e;
    }

    .go {
        width: 260rpx;
        height: 80rpx;
        background: #ffaa00;
        color: #ffffff;
        border-radius: 60rpx 0 0 60rpx;
    }

    .mai {
        width: 260rpx;
        height: 80rpx;
        background: #ff5500;
        color: #ffffff;
        border-radius: 0 60rpx 60rpx 0;
    }

    .go1 {
        width: 350rpx;
        height: 80rpx;
        background: #ffaa00;
        color: #ffffff;
        border-radius: 60rpx 0 0 60rpx;
    }

    .mai1 {
        width: 350rpx;
        height: 80rpx;
        background: #ff5500;
        color: #ffffff;
        border-radius: 0 60rpx 60rpx 0;
    }

    .bai {
        width: 100%;
        height: 100rpx;
        background: #ffffff;
        position: fixed;
        bottom: 0rpx;
    }

    .biaozun {
        width: 100rpx;
        height: 60rpx;
        background: #f4d8d9;
        color: red;
        border-radius: 10rpx;
        margin-top: 20rpx;
    }

    .biaozun1 {
        width: 100rpx;
        height: 60rpx;
        background: #f1f1f1;
        color: #000;
        border-radius: 10rpx;
        margin-top: 20rpx;
    }

    .shuliang {
        width: 70rpx;
        height: 70rpx;
        background: #f1f1f1;
        margin: auto;
        text-align: center;
    }

    .jia {
        font-size: 50rpx;
        border-radius: 0 15rpx 15rpx 0;
    }

    .jian {
        width: 60rpx;
        background: #f0f0f0;
        color: #000000;
        font-size: 50rpx;
        border-radius: 15rpx 0 0 15rpx;
    }

    .jian1 {
        width: 60rpx;
        background: #f0f0f0;
        color: #a5a5a5;
        font-size: 50rpx;
        border-radius: 15rpx 0 0 15rpx;
    }

    .xiangqing p {
        display: block;
        -webkit-margin-before: 1em;
        -webkit-margin-after: 1em;
        -webkit-margin-start: 0px;
        -webkit-margin-end: 0px;
    }
</style>